<template>
  <div >
       <div class="con" v-for="item in list" :key="item.id">
         <!-- 添加跳转到 内容页的链接 -->
          <router-link :to="'/item/' + item.id">
            <div class="movieInfo">
              <div class="left">
                <img :src="item.img" alt="" />
              </div>
              <div class="middle">
                <p>
                  {{ item.nm }}
                  <span :class="[item]"></span>
                  <span v-if="item.preShow" class="pre-show"></span>
                </p>
                <p>
                  观众评 <span>{{ item.sc }}</span>
                </p>
                <p>主演: {{ item.star }}</p>
                <p>{{ item.showInfo }}</p>
              </div>
              <div class="right">
                <div class="active1" v-show="!item.globalReleased">预售</div>
                <div class="active" v-show="item.globalReleased">购票</div>
              </div>
            </div>
         </router-link>
      </div>
    </div>
</template>

<script>
export default {
  name: "list",
  props: ["list"], //获取从父组件传过来的参数
};
</script>

<style scoped>
.con {
  width: 100%;
  height: 100px;
  background: #fff;
  margin-top: 5px;
  margin-bottom: 5px;
}
.movieInfo {
  display: flex;
  background-color: #fff;
}
.movieInfo ::-webkit-scrollbar {
  display: none;
}
.left {
  width: 20%;
  padding: 10px 15px;
}
.middle {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: 15px;
  font-size: 13px;
  color: #666;
  flex: 1;
}
.middle p:nth-of-type(1) {
  font-size: 17px;
  color: #333;
  font-weight: 700;
}
.right {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
}
.active1 {
  width: 47px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  color: #fff;
  background: blue;
}
.active {
  width: 47px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  color: #fff;
  background: red;
}
</style>